.timeline-bubble{ height: 10px; width: 10px; border-radius: 10px; position: absolute; left: -5px; top: 0}
.storyline{
	position: relative; display: inline-block;
	&:after{ content: ""; height: 100%; position: absolute; left: 50%; width: 1px; background: #dddddd; top: 0; z-index: 0}
	&>div{ z-index: 1}
	.story-block{
		display: block; width: 50%; padding: 0 15px; position: relative; margin-top: 150px;
		&:before{ content: ""; height: 10px; width: 10px; display: inline-block;  top: 0; right: -5px; border-left: 10px solid rgba(0, 0, 0, 0.2); border-right: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; }
		&:first-child{ margin-top: 0;}
		&.no-arrow{ &:before{ display: none}}
		&.left{ 
			float: left;
			.timeline-bubble{ left: auto; right: -5px; }
				&.border-danger{ 
					.card{ border-right: 4px solid $red !important;} 
					&:before{border-left: 10px solid $red ;}
				}
				&.border-success{ 
					.card{ border-right: 4px solid $green !important;} 
					&:before{border-left: 10px solid $green ;}
				}
				&.border-warning{ 
					.card{ border-right: 4px solid $yellow !important;} 
					&:before{border-left: 10px solid $yellow;}
				}
				&.border-primary{ 
					.card{ border-right: 4px solid $blue !important;} 
					&:before{border-left: 10px solid $blue;}
				}
				&.border-secondary{ 
					.card{ border-right: 4px solid $content-color-secondary !important;} 
					&:before{border-left: 10px solid $content-color-secondary;}
				}
				&.border-dark{ 
					.card{ border-right: 4px solid $content-color-primary !important;} 
					&:before{border-left: 10px solid $content-color-primary;}
				}
		}
		&.right{ 
			float: right; 
			&:before{ top: 0; left: -5px; right: auto; border-right: 10px solid rgba(0, 0, 0, 0.2); border-left: 10px solid transparent; border-bottom: 10px solid transparent;  }
			&.border-danger{ 
				.card{ border-left: 4px solid $red !important;} 
				&:before{border-right: 10px solid $red ;}
			}
			&.border-success{ 
				.card{ border-left: 4px solid $green !important;} 
				&:before{border-right: 10px solid $green ;}
			}
			&.border-warning{ 
				.card{ border-left: 4px solid $yellow !important;} 
				&:before{border-right: 10px solid $yellow;}
			}
			&.border-primary{ 
				.card{ border-left: 4px solid $blue !important;} 
				&:before{border-right: 10px solid $blue;}
			}
			&.border-secondary{ 
				.card{ border-left: 4px solid $content-color-secondary !important;} 
				&:before{border-right: 10px solid $content-color-secondary;}
			}
			&.border-dark{ 
				.card{ border-left: 4px solid $content-color-primary !important;} 
				&:before{border-right: 10px solid $content-color-primary;}
			}
		}
		
	}
	&.left{ 
		&:after{ left: 15px;}
		.story-block{ width: 100%; margin: 0; &:before{ top: 0; left: -5px; right: auto; border-right: 10px solid rgba(0, 0, 0, 0.2); border-left: 10px solid transparent; border-bottom: 10px solid transparent;  } }
	}
}


@media screen and (max-width:768px){
	.storyline{
		&:after{ left: 0}
		.story-block.left,  .story-block.right{ 
			float: left; width: 100%; margin-top: 0;
			&:before{ content: ""; height: 10px; width: 10px; display: inline-block;  top: 0; left: -5px; right: auto; border-left-color: transparent !important;  border-right-color: rgba(0, 0, 0, 0.2)}
			.timeline-bubble{left: -5px !important; right: auto;}
			&.border-danger{ 
				.card{ border-left: 4px solid $red !important; border-right: none !important} 
				&:before{border-right: 10px solid $red ;}
			}
			&.border-success{ 
				.card{ border-left: 4px solid $green !important; border-right: none !important} 
				&:before{border-right: 10px solid $green ;}
			}
			&.border-warning{ 
				.card{ border-left: 4px solid $yellow !important; border-right: none !important} 
				&:before{border-right: 10px solid $yellow;}
			}
			&.border-primary{ 
				.card{ border-left: 4px solid $blue !important; border-right: none !important} 
				&:before{border-right: 10px solid $blue;}
			}
			&.border-secondary{ 
				.card{ border-left: 4px solid $content-color-secondary !important; border-right: none !important} 
				&:before{border-right: 10px solid $content-color-secondary;}
			}
			&.border-dark{ 
				.card{ border-left: 4px solid $content-color-primary !important; border-right: none !important} 
				&:before{border-right: 10px solid $content-color-primary;}
			}
		}
		
	}
}